<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>User Page</title>

            <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.css" />
            <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>-->
            <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.js"></script>

            <script type="text/javascript">

                $(function() {
                    $("#courseid")
                            .suggest({
                        key: "AIzaSyA0Fjcd-S9IZV8WKl6o4JQsyTseu1M43NA",
                        show_id: true
                    })
                            .bind("fb-select", function(e, data) {
                        if (data.notable) {
                            document.getElementById('courseid').value = data.name + " " + '(' + data.notable.name + ')';
                        } else {
                            document.getElementById('courseid').value = data.name;
                        }
                    });
                });

            </script>
        </h:head>

        <h:body>

            <p:layout  fullPage="true">                 
                <p:layoutUnit position="north" header="EducationX">                   
                    <p:toolbar style="height:25px">
                        <p:toolbarGroup align="left">
                            <h:link value="Courses" outcome="courses"/>       
                            <p:separator />
                            <h:link value="User Profile" outcome="userProfile" />
                            <p:separator />  
                            <h:link value="Tags" outcome="tags"/>                              
                            <p:separator />  
                            <h:link value="Add Course" outcome="addCourse"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:inputText id="courseid"  style="width:300px; height:20px; font-size:12px"/>
                            <p:button value="Search" style="top:3px; height:20px; font-size: 12px">
                            </p:button>
                            <!--
                            <p:separator />  
                            <h:commandButton value="Logoff" action="#{user.logOffUser()}"/>
                            -->
                        </p:toolbarGroup>
                    </p:toolbar>                    
                </p:layoutUnit>      

                <p:layoutUnit position="west" size="300">
                    <p:layout>
                        <p:layoutUnit position="north" size="120">
                            <h:graphicImage url="images\xmen.jpg" width="100" height="100"/>
                        </p:layoutUnit>
                        <p:layoutUnit position="center">
                            <h3>User Information</h3>       
                            <p:separator />  

                            <h:panelGrid columns="2">
                                <h:outputText value="Name:"/>
                                <h:outputText value="#{user.user.name}" title="Name" />   

                                <h:outputText value="Email:"/>
                                <h:outputText value="#{user.user.email}" title="Email"  />                       

                                <h:outputText value="Total Courses:"/>
                                <h:outputText value="#{user.user.countOfEnrollmentCourses}" title="totalCourses" />

                                <h:outputText value="Reputation:"/>
                                <h:outputText value="#{user.user.reputation}" title="reputation" />
                            </h:panelGrid>

                        </p:layoutUnit>
                    </p:layout>                     
                </p:layoutUnit>          

                <p:layoutUnit position="center">

                    <p:dataGrid var="c" value="#{user.enrolledCourses}" columns="3" 
                                paginator="true"
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                >
                        <p:panel style="text-align:center">
                            <h:panelGrid columns="1" style="width:100%">
                                <h:outputText value="#{c.name}" />
                                <p:scrollPanel style="width:250px;height:250px">                                
                                    <h:outputText value="#{c.description}" />                                
                                </p:scrollPanel>
                            </h:panelGrid>
                        </p:panel>
                    </p:dataGrid>                     
                </p:layoutUnit> 
            </p:layout>                        
        </h:body>         
    </f:view>
</html>